<template>
	<view>
		<view class="flex a-center ju-end" @click="show=true">
			<view v-if="label" class="text-hidden-1 f1 right">{{label}}</view>
			<view class="color-76" v-else>{{placeholder}}</view>
			<image src="../static/right.svg" class="image30 ml10"></image>
		</view>
		<u-picker immediateChange closeOnClickOverlay :show="show" :columns="[columns]" :keyName="option.label"
			@close="show=false" @confirm="confirm" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
	export default {
		name: "picker",
		props: {
			placeholder: { // 占位文本
				type: String,
				default: '请选择'
			},
			list: { // 数据源
				type: Array,
				default: []
			},
			value: { // 绑定值
				type: [String, Number],
				default: ''
			},
			option: { // 配置
				type: Object,
				default: {
					label: 'label',
					value: 'id'
				}
			}
		},
		watch: {
			list: {
				handler(newVal) {
					this.columns = newVal.filter(v => !v.hidden)
				},
				deep: true,
				immediate: true,
			},
		},
		computed: {
			label() {
				if (this.value) {
					let val = this.list.find(v => v[this.option.value] == this.value)
					return val ? val[this.option.label] : this.value
				}
				return ''
			}
		},
		data() {
			return {
				show: false,
				columns: [],
			};
		},
		methods: {
			cancel() {
				this.$emit('input', '')
				this.show = false
			},
			confirm(val) {
				let value = val.value[0]
				this.$emit('input', value[this.option.value])
				this.$emit('change', value[this.option.value])
				this.show = false
			},
		}
	}
</script>

<style>

</style>